<template>
		<view >
			<top-box @tabClick="tabClick" @search="search" @categoryClick="categoryClick" :scrollTop="scrollTop" :stickyTop="stickyTop"></top-box>
			<view class="data-box">
				<user-list :virtualList="processedList"></user-list>
			</view>
		</view>
</template>

<script>
	import topBox from '@/pages/tabbar/components/home/topBox.vue';
	import UserList from '@/pages/tabbar/components/home/userList.vue';
	export default {
		components: {  
			topBox,
			UserList,
		},
		props: {
			scrollTop: {
				type: Number,
				default: 0,
			},
			stickyTop: {
				type: Number,
				default: 0,
			},
			virtualList: {
				type: Array,
				default: () => [],
			},
		},
		computed: {
			processedList() {
				return (this.virtualList || []).map(item => {
					return {
						...item,
						default: false,
						newList: item.newList || [],
						hotList: item.hotList || [],
						id: item.id || '',
						name: item.name || '',
						avatar: item.avatar || '',
						categoryNameList: item.categoryNameList || [],
						sex: item.sex || 0,
						age: item.age || 18,
						intro: item.intro || '',
						nickname: item.nickname || '',
						sound: item.sound || '',
						soundTime: item.soundTime || 0,
						onlineStatus: item.onlineStatus || false,
					}
				})
			}
		},
		data() {
			return {
				
			}
		}, 
		created() {
			
		},
		methods: {
			tabClick(e) {
				this.$emit('tabClick', e);
			},
			search(e) {
				this.$emit('search', e);
			},
			categoryClick(e) {
				this.$emit('categoryClick', e);
			},
		},
		mounted() {
			this.$emit('mounted');
		}
	}
</script>

<style lang="scss" scoped>
	.data-box {
		padding: 0 15px;
	}
</style>